import Popup from "@/components/Popup/Popup";
import to from "await-to-js";
import { defineComponent, reactive, ref } from "vue";
import styles from "./Detail.module.less";


export default defineComponent({
  props: {
    service: {
      type: Object,
    }
  },
  setup(props, { expose }) {
    const detailPopupRef = ref(null as any);
    const state = reactive({
      id: null,
      chineseName: '',
      englishName: '',
      brandName: '',
      seriesName: '',
      image: '',
      setupVideo: '',
      richText: '',
    })
    const getDetail = async () => {
      const [err, res]: any = await to(props.service?.detail(state.id))
      if (!err) {
        state.chineseName = res?.data?.data?.chineseName || '';
        state.englishName = res?.data?.data?.englishName || '';
        state.brandName = res?.data?.data?.brandName || '';
        state.seriesName = res?.data?.data?.seriesName || '';
        state.image = res?.data?.data?.image || '';
        state.setupVideo = res?.data?.data?.setupVideo || '';
        state.richText = res?.data?.data?.richText || '';
      }
    }
    const open = ({ id }) => {
      state.id = id;
      getDetail();
      detailPopupRef.value.open();
    }
    expose({
      open
    })
    return () => (
      <Popup ref={detailPopupRef}
        title='产品详情'
        oriState={state}
        width='900px'
      >
        <div class={styles.container}>
          <div class={styles.rows}>
            <div class={styles.row}>
              <div class={styles.col}>
                <div class={styles.colLabel}>产品名称</div>
                <div class={styles.colValue}>{state.chineseName}</div>
              </div>
            </div>
            <div class={styles.row}>
              <div class={styles.col}>
                <div class={styles.colLabel}>产品英文名称</div>
                <div class={styles.colValue}>{state.englishName}</div>
              </div>
            </div>
            <div class={styles.row}>
              <div class={styles.col}>
                <div class={styles.colLabel}>产品品牌名称</div>
                <div class={styles.colValue}>{state.brandName}</div>
              </div>
            </div>
            <div class={styles.row}>
              <div class={styles.col}>
                <div class={styles.colLabel}>产品系列名称</div>
                <div class={styles.colValue}>{state.seriesName}</div>
              </div>
            </div>
            <div class={styles.row}>
              <div class={styles.col}>
                <div class={styles.colLabel}>产品图片</div>
                <div class={styles.colValue}>
                  <div class={styles.mediaBox}>
                    <a-image src={state.image} width={120}></a-image>
                  </div>
                </div>
              </div>
            </div>
            <div class={styles.row}>
              <div class={styles.col}>
                <div class={styles.colLabel}>产品安装视频</div>
                <div class={styles.colValue}>
                  <div class={styles.mediaBox}>
                    <video width="200" height="180" controls src={state.setupVideo}></video>
                  </div>
                </div>
              </div>
            </div>
            <div class={styles.row}>
              <div class={styles.col}>
                <div class={styles.colLabel}>产品详情信息</div>
                <div class={styles.colValue}>
                  <div class={styles.mediaBox}>
                    <div v-html={state.richText}></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Popup>
    )
  }
})